<template>
    <div class="app-container">
        <div class="container">
            <div class="main page page-list">
                <div class="head-container">
                    <el-card shadow="never">
                        <div class="search-bar">
                            <el-form size="mini" :inline="true" :model="searchModel">
                                <el-form-item label="商户编号">
                                    <el-input size="mini" v-model="searchModel.userId" placeholder="商户编号"></el-input>
                                </el-form-item>
                            
                                <el-form-item label="支付宝账号:">
                                    <el-input size="mini" v-model="searchModel.alipayNickName"
                                        placeholder="支付宝账号"></el-input>
                                </el-form-item>

                                <el-form-item label="创建时间:">
                                    <el-date-picker v-model="searchModel.createTime" type="datetimerange"
                                        :picker-options="pickerOptions" value-format='yyyy-MM-dd HH:mm:ss'
                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini"
                                        align="right">
                                    </el-date-picker>
                                </el-form-item>

                                <el-form-item class="operations">
                                    <el-button type="primary" @click="search(1)">查询</el-button>
                                    <el-button type="default" @click="reset">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>
                </div>

                <el-card shadow="never">
                    <el-table size="mini" v-loading="loading" ref="multipleTable" :data="tableData" highlight-current-row>
                        <el-table-column label="创建时间">
                            <template slot-scope="scope">
                                <div>
                                    {{ scope.row.createTime }}
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column label="支付宝订单号">
                            <template slot-scope="scope">
                                <div>
                                    {{ scope.row.orderNo }}
                                </div>
                            </template>
                        </el-table-column>
                                    
                        <el-table-column label="商户编号">
                            <template slot-scope="scope">
                                <div>
                                    {{ scope.row.userId }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="支付宝账号">
                            <template slot-scope="scope">
                                <div>
                                    {{ scope.row.alipayNickName }}
                                </div>
                                <div>
                                    {{ scope.row.alipayName }}
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column label="汇款账号">
                            <template slot-scope="scope">
                                <div>
                                    {{ scope.row.payerIdentity }}
                                </div>
                                <div>
                                    {{ scope.row.payerName  }}
                                </div>                          
                            </template>
                        </el-table-column>

                        <el-table-column prop="transAmount" label="充值金额">
                            <template slot-scope="scope">
                                <div>
                                    {{ scope.row.transAmount }}
                                </div>
                            </template>
                        </el-table-column>
                        
                    </el-table>
                    <el-row class="paging-wrap">
                        <el-col :span="24">
                            <el-pagination :current-page="searchModel.pageNo" :page-sizes="[10, 20, 30, 40]"
                                :page-size="searchModel.pageSize" layout="prev, pager, next, sizes, jumper"
                                @size-change="PageSizeChange" @current-change="PageChange" :total="searchModel.count">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </el-card>

            </div>
        </div>
    </div>
</template>
  
  
<script>
import { searchBookAccountLargeDepositChargeOrder } from "@/api/business";
import pickerOptions from "../../utils/options";
import moment from "moment";

let defaultSearchModel = {
    pageSize: 10,
    pageNo: 1,
    count: null,
    userId: null,
    alipayNickName: "",
    createTime: [

    ]
};
export default {
    data() {
        return {
            searchModel: _.cloneDeep(defaultSearchModel),
            loading: false,
            opLoading: false,
            tableData: [],
            pickerOptions,
        };
    },

    components: {},
    methods: {
        search(pageNo) {
            this.loading = true;
            if (pageNo) {
                this.searchModel.pageNo = pageNo;
            }
            let searchModel = _.cloneDeep(this.searchModel);
            this.compileSearchModel(searchModel);
            searchBookAccountLargeDepositChargeOrder(searchModel)
                .then((res) => {
                    if (res.success) {
                        this.searchModel.count = res.count;
                        this.tableData = res.data;
                    }
                    this.loading = false;
                })
                .catch((err) => {
                    console.log(err);
                    this.searchModel.count = 0;
                    this.tableData = [];
                });
        },
        compileSearchModel(searchModel) {
            if (searchModel.createTime) {
                searchModel.minCreateTime = searchModel.createTime[0];
                searchModel.maxCreateTime = searchModel.createTime[1];
            }
            delete searchModel.createTime;
            searchModel.pageNo = searchModel.pageNo - 1;
        },

        /**
         * 页数改变
         * @param data 改变后的页数
         * @constructor
         */
        PageChange(data) {
            this.searchModel.pageNo = data;
            this.search();
        },
        /**
         * 单页条数改变
         * @param data 改变后的条数
         * @constructor
         */
        PageSizeChange(data) {
            this.searchModel.pageSize = data;
            this.search();
        },
        reset() {
            this.searchModel = _.cloneDeep(defaultSearchModel);
            this.search();
        },
    },
    mounted() {
        this.search()
    },
};
</script>
  
<style lang="scss" scoped>
.substationGroup {
    margin-bottom: 16px;

    .substationItem {
        margin-right: 20px;
    }
}
</style>
  